<template>
    <v-chart 
        v-bind:forceFit="true"
        height="400" 
        v-bind:data="data" 
        v-bind:padding="[20, 20, 95, 20]" 
        v-bind:scale="scale">
        <v-tooltip  />
        <v-axis 
            :dataKey="axis1Opts.dataKey" 
            :line="axis1Opts.line" 
            :tickLine="axis1Opts.tickLine" 
            :grid="axis1Opts.grid" />
        <v-axis 
            :dataKey="axis2Opts.dataKey" 
            :line="axis2Opts.line" 
            :tickLine="axis2Opts.tickLine" 
            :grid="axis2Opts.grid" />
        <v-legend 
            dataKey="user" 
            marker="circle" 
            :offset="30" />
        <v-coord
            type="polar" 
            radius="0.8" />
        <v-line 
            position="item*score" color="user" :size="2" />       
      	<v-point 
            position="item*score" color="user" :size="4" shape="circle" />
    </v-chart>     
</template>

<script>
const DataSet = require('@antv/data-set')  //能混用依赖于babel
const sourceData = [  //模拟数据
    {item: '引用', a: 70, b: 30, c: 40},
    {item: '口碑', a: 60, b: 70, c: 40},
    {item: '产量', a: 50, b: 60, c: 40},
    {item: '贡献', a: 40, b: 50, c: 40},
    {item: '热度', a: 60, b: 70, c: 40},
    {item: '引用', a: 70, b: 50, c: 40}
]
const dv = new DataSet.View().source(sourceData)
dv.transform({
    type: 'fold',
    fields: ['a', 'b', 'c'],
    key: 'user',
    value: 'score'
})
const scale = [{
    dataKey: 'score',
    min: 0,
    max: 80
}]
const data = dv.rows

const axis1Opts = {
    dataKey: 'item',
    line: null,
    tickLine: null,
    grid: {
    lineStyle: {
        lineDash: null
    },
    hideFirstLine: false
    }
}
const axis2Opts = {
    dataKey: 'score',
    line: null,
    tickLine: null,
    grid: {
    type: 'polygon',
    lineStyle: {
        lineDash: null
    }
    }
}
export default {
    name:"index-radar",
    data(){
        return {
            msg:"home radar",
            sourceData:sourceData,
            data:data,
            axis1Opts:axis1Opts,
            axis2Opts:axis2Opts,
            scale
        }
    }
}
</script>